<template>
	<view>
		<header-top :messageInfo="{typeFlag:false,message:'首页'}"></header-top>
		<!-- 第一个图表 -->
		<!-- 		<view class="mainpadding">
			<view class="chart1">
				
				<view class="chart1_top flexbetween">
					<view class="charttitle flexleft margin_rightten" @click="jumpurl('/pages/incomerank/incomerank')">
						月收入排名
						<u-icon color="#ffffff" size="14" name="arrow-right"></u-icon>
					</view>
					<view class="flexcenter">
						<view class="charttitle">我的排名:</view>
						<view class="charttitle">{{dataAll.month.paiming}}</view>
						<view class="upordown">
							<image src="../../static/imags/home/down.png" mode="" v-if="dataAll.month.last_paiming<0">
							</image>
							<image src="../../static/imags/home/up.png" mode="" v-if="dataAll.month.last_paiming>=0">
							</image>
						</view>
						<view class="charttitle">{{dataAll.month.last_paiming}}名</view>
					</view>
				</view>
				<view class="flexright" style="margin-top: 10rpx;">
					<view class="colorbox1 margin_rightfive"></view>
					<view class="charttuli margin_rightten">昨日</view>
					<view class="colorbox2 margin_rightfive"></view>
					<view class="charttuli margin_rightten">今日</view>
				</view>
				
				<view class="charts-box">
					<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
				</view>
				
				<view class="chart1_bottom flexbetween">
					<view class="itembox flexcolumn">
						<view>今年总收入</view>
						<view class="itembox_bottom ">
							<text class="bigtext">{{dataAll.year_money}}</text>
						</view>
					</view>
					<view class="itembox flexcolumn">
						<view>月收入</view>
						<view class="itembox_bottom ">
							<text class="bigtext">{{dataAll.month_money}}</text>
						</view>
					</view>
					<view class="itembox flexcolumn">
						<view>日收入</view>
						<view class="itembox_bottom ">
							<text class="bigtext">{{dataAll.day_money}}</text>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 第二个图表 -->
		<view class="mainpadding">
			<view class="chart1">
				<!-- 表格顶部 -->
				<view class="chart1_top flexbetween">
					<view class="charttitle flexleft margin_rightten fos36"
						@click="jumpurl('/pages/incomerank/incomerank')">
						总收入排名
						<u-icon color="#1ED76D" size="18" name="arrow-right"></u-icon>
					</view>
					<view class="flexcenter">
						<view class="charttitle fos36">我的排名:</view>
						<view class="charttitle fos36" style="color: #1ED76D;">{{dataAll.rank}}</view>
						<!-- <view class="upordown">
							<image src="../../static/imags/home/down.png" mode="" v-if="dataAll.year.last_paiming<0">
							</image>
							<image src="../../static/imags/home/up.png" mode="" v-if="dataAll.year.last_paiming>=0">
							</image>
						</view> -->
						<!-- <view class="charttitle">{{dataAll.year.last_paiming}}名</view> -->
					</view>
				</view>
				<!-- <view class="flexright" style="margin-top: 10rpx;">
					<view class="colorbox1 margin_rightfive"></view>
					<view class="charttuli margin_rightten">去年</view>
					<view class="colorbox2 margin_rightfive"></view>
					<view class="charttuli margin_rightten">今年</view>
				</view> -->
				<!-- 表格 -->
				<view class="charts-box">
					<qiun-data-charts type="column" :opts="opts" :chartData="chartDatatwo" />
				</view>
				<!-- 表格底部 -->
				<view class="chart1_bottom flexbetween">
					<view class="itembox flexcolumn">
						<view>累计总收入</view>
						<view class="itembox_bottom ">
							<text class="bigtext">{{dataAll.total_sr_price || 0}}</text>
						</view>
					</view>
					<view class="itembox flexcolumn">
						<view>年收入</view>
						<view class="itembox_bottom ">
							<text class="bigtext">{{dataAll.total_year_sr_price || 0}}</text>
						</view>
					</view>
					<view class="itembox flexcolumn">
						<view>月收入</view>
						<view class="itembox_bottom ">
							<text class="bigtext">{{dataAll.total_month_sr_price || 0}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 进度条 -->
		<view class="mainpadding" @click="goTargetInfo">
			<view class="jdt">
				<view class="flexbetween">
					<view class="mubiao">{{year}}年{{month}}月目标收入</view>
					<view class="mubiao_content flexleft">
						<view class="hongbaoimage">
							<image src="../../static/imags/home/hongbao.png" mode=""></image>
						</view>
						<view>目标收入:{{dataAll.yjdb_price || "0"}}</view>
					</view>
				</view>
				<!-- percentage -->
				<view style="margin-top: 30rpx;padding: 0 50rpx;">
					<view class="fos30" style="margin-bottom: 10rpx;">成长值：{{percentage}}%</view>
					<u-line-progress :percentage="percentage" height="26" activeColor="#1ED76D">
						<!-- <u-line-progress percentage="70" height="26" activeColor="#1ED76D"> -->
						<!-- <view class="jdtlable">
							<view class="lable">成长值{{Number(percentage).toFixed(2)}}%
								<image class="sanjiao" src="../../static/imags/home/sanjiao.png" mode=""></image>
							</view>
							<view class="cicle"></view>
						</view> -->
					</u-line-progress>
				</view>
				<view class="jdt_bottom flexbetween">
					<view>目标奖金:<text style="color: #ff0000;">{{dataAll.yjdb_jlprice}}</text></view>
					<view>距目标:<text style="color: #1ED76D;">{{dataAll.jmb_price}}</text></view>
				</view>

				<view class="jdt_leftimage">
					<image src="../../static/imags/home/hbleft.png" mode=""></image>
				</view>
				<view class="jdt_righttimage">
					<image src="../../static/imags/home/hbright.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 模块 -->
		<view class="modelpadding flexbetween">
			<view class="itemmodule flexcolumn radius" @click="jumpurl('/pages/myemploy/myemploy')">
				<view class="topimage">
					<image src="../../static/imags/home/itemicon1.png" mode=""></image>
				</view>
				<view class="moduletext">合作方</view>
				<view class="moduletext" style="height: 40rpx;">{{dataAll.team_num || 0}}</view>
			</view>
			<view class="itemmodule flexcolumn radius" @click="jumpurl('/pages/customermanagement/customermanagement')">
				<view class="topimage3">
					<image src="../../static/imags/home/itemicon3.png" mode=""></image>
				</view>
				<view class="moduletext">客户管理</view>
				<view class="moduletext" style="height: 40rpx;">{{dataAll.kh_num || 0}}</view>
			</view>
			<view class="itemmodule flexcolumn margin_top radius" @click="jumpurl('/pages/mypage/lookMoney')">
				<view class="topimage2">
					<image src="../../static/imags/home/itemicon2.png" mode=""></image>
				</view>
				<view class="moduletext">我的钱包</view>
				<view class="moduletext" style="height: 40rpx;">{{dataAll.money || "0.00"}}</view>
			</view>

			<view class="itemmodule flexcolumn margin_top radius"
				@click="jumpurl('/pages/customerregist/customerregist')">
				<view class="topimage4">
					<image src="../../static/imags/home/itemicon4.png" mode=""></image>
				</view>
				<view class="moduletext">客户注册</view>
				<view class="moduletext" style="height: 40rpx;"></view>
			</view>
		</view>
		<!-- #ifdef APP-PLUS || H5 -->
		<zy-update theme="blue"  :appstoreflag="true" :autocheckupdate="true" :updateurl="updateurl">
		</zy-update>
		<!-- #endif -->
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	// #ifdef APP-PLUS  || H5
	import ZyUpdate from '../../components/zy-upgrade/zy-upgrade.vue'
	// #endif
	export default {
		// #ifdef APP-PLUS  || H5
		components: {
			ZyUpdate
		},
		// #endif
		data() {
			return {
				updateurl:'https://app.gzxbyjs.com/employeesapi/index/getDownloadUrl',
				percentage: "",
				year: "",
				month: "",
				// 第一个图表内容
				// chartData: {},
				// //您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					dataLabel: false,
					color: ["#1ED76D", "#FFEAB5", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					legend: { //图例配置
						show: false, //是否显示图例配置
						fontColor: "#fff", //字体颜色
						position: "top",
						float: "right",
					},
					xAxis: { //x轴
						disableGrid: true,
						fontColor: "#fff",
						rotateLabel: true, //文字旋转
						rotateAngle: 40, //旋转角度
						format: 'Xdemo'
					},
					yAxis: { //y轴
						disableGrid: true, //true不显示横线线，false显示横线
						data: [{
							min: 0,
							fontColor: "#fff"
						}],
					},
					extra: {
						column: {
							type: "group",
							width: 10,
							activeBgColor: "#fff",
							activeBgOpacity: 0.08,
							barBorderCircle: true, //顶部是否为圆角
						}
					}
				},
				// 第二个图表内容
				chartDatatwo: {},
				dataAll: {
					month: {
						paiming: 0,
						last_paiming: 0
					},
					year: {
						paiming: 0, //本年排名
						last_paiming: 0 //上涨名次，负数的话是下降
					},
					"day_money": 0, //今日收入
					"month_money": "", //本月收入
					"year_money": "", //本年收入
					"allmoney": 0, //总收入
					"user_num": 0, //员工数量
					kuhu_num: "",
					"money": "", //我的钱包余额
					"yue": "", //当前月份
					"mbshouru": "", //目标收入
					"jiangjin": "", //奖金
					"jl_mb": 0 //距离目标剩余金额
				}
			};
		},
		// onLoad() {
		// 	this.getInfo()
		// },
		onShow() {
			if (httpRequest.checkIsLogin()) {
				this.init()
				this.getInfo()
				this.getList()
			}
			
			const date = new Date()
			this.year = date.getFullYear()
			this.month = date.getMonth() + 1
		},
		methods: {
			getInfo() { //消息未读数量
				let _this = this;
				httpRequest.request('/employeesapi/index/newsNoReadNum', 'GET', {

				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.info = res.data
						if(res.data.total_noread_num!=0){
							uni.setTabBarBadge({
								index: 1,
								text: res.data.total_noread_num
							})
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 首页接口
			init() {
				httpRequest.request('/employeesapi/user/index', 'GET', {}).then(res => {
					this.dataAll = res.data
					// this.percentage = (Number(res.data.yjdb_price) - Number(res.data.jmb_price)) / Number(res.data
					// 	.yjdb_price) * 100
					this.percentage = res.data.yjwc_rate
				})
			},
			getList() {
				httpRequest.request('/employeesapi/user/sfRangList', 'GET', {
					page: 1
				}).then(res => {
					// console.log(this.dataAll)
					// 月
					// let data = {
					// 	categories: [],
					// 	series: [{
					// 			name: "昨日",
					// 			data: []
					// 		},
					// 		{
					// 			name: "今日",
					// 			data: []
					// 		}
					// 	],
					// }
					// 年
					let data2 = {
						categories: [],
						// series: [{
						// 		name: "收入",
						// 		data: []
						// 	},
						// 	{
						// 		name: "今年",
						// 		data: []
						// 	}
						// ]
						series: [{
							name: "收入",
							data: []
						}]
					};
					let arr = res.data.data.slice(0, 7)
					arr.forEach(item => {
						// data.categories.push(item.name)
						data2.categories.push(item.username_text)
					})
					arr.forEach(item => {
						// data.series[0].data.push(item.last_month)
						// data.series[1].data.push(item.jinri_shouru)
						data2.series[0].data.push(item.moneylog_sum)
						// data2.series[1].data.push(item.moneylog_sum)
					})
					// this.chartData = JSON.parse(JSON.stringify(data));
					this.chartDatatwo = JSON.parse(JSON.stringify(data2));
					console.log(111)
					console.log(this.chartDatatwo)
					// this.percentage = (Number(res.data.mbshouru) - Number(res.data.jl_mb)) / Number(res.data
					// 	.mbshouru) * 100
				})
			},
			goTargetInfo(){ //目标详情
				uni.navigateTo({
					url:"/pages/targetInfo/targetInfo"
				})
			},
			jumpurl(url) {
				// if (url == 1) {
				// 	uni.navigateTo({
				// 		url: '/pages/mypage/about?msg=4'
				// 	})
				// }
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.moduletext {
		font-size: 36rpx;
	}

	// 模块
	.modelpadding {
		padding: 30rpx;
		flex-wrap: wrap;
	}

	.itemmodule {
		padding: 51rpx 0 61rpx 0;
		width: 48%;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		background-color: #3476fe;
	}

	.itemmodule2 {
		margin-top: 30rpx;
		padding: 51rpx 0 91rpx 0;
		width: 48%;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		background-color: #3476fe;
	}

	.topimage {
		height: 148rpx;

		image {
			width: 213rpx;
			height: 122rpx;
		}
	}

	.topimage2 {
		height: 148rpx;

		image {
			width: 148rpx;
			height: 141rpx;
		}
	}

	.topimage3 {
		height: 148rpx;

		image {
			width: 141rpx;
			height: 148rpx;
		}
	}

	.topimage4 {
		height: 148rpx;

		image {
			width: 127rpx;
			height: 133rpx;
		}
	}
</style>
<style lang="scss" scoped>
	.top_image {
		width: 20rpx;
		height: 20rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 460rpx;
	}

	.mainpadding {
		margin-top: 30rpx;
		padding: 0 30rpx;
	}

	.chart1 {
		border-radius: 20rpx;
		background-color: #3476fe;
		color: #fff;
		font-weight: 800;
	}

	// 图表标题
	.chart1_top {
		padding: 30rpx 15rpx 0rpx 15rpx;
		flex-wrap: wrap;
	}

	.margin_rightten {
		margin-right: 10rpx;
	}

	.margin_rightfive {
		margin-right: 10rpx;
	}

	.charttitle {
		font-size: 30rpx;
		font-family: PingFang SC;
	}

	.fos36 {
		font-size: 36rpx;
	}

	.colorbox1 {
		width: 39rpx;
		height: 22rpx;
		background-color: #1ED76D;
	}

	.colorbox2 {
		width: 39rpx;
		height: 22rpx;
		background-color: #FFEAB5;
	}

	.charttuli {
		font-size: 24rpx;
	}

	.upordown {
		width: 34rpx;
		height: 37rpx;
		margin: 0 10rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	// 图标底部
	.chart1_bottom {
		padding: 30rpx 46rpx 30rpx 46rpx;
		color: #fff;
	}

	.itembox {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}

	.itembox_bottom {
		font-size: 24rpx;
		font-weight: 800;
	}

	.bigtext {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
	}

	// 进度条
	.jdt {
		background-color: #FFAE2A;
		border-radius: 20rpx;
		padding: 20rpx 30rpx;
		position: relative;

	}

	.mubiao {
		font-size: 30rpx;
		font-family: DFKai-SB;
		font-weight: 800;
		color: #FFFFFF;
	}

	.mubiao_content {
		font-size: 24rpx;
		font-family: DFKai-SB;
		font-weight: 800;
		color: #F45610;
	}

	.hongbaoimage {
		width: 21rpx;
		height: 27rpx;
		margin-right: 10rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.jdt_leftimage {
		position: absolute;
		bottom: -5rpx;
		left: -5rpx;
		width: 154rpx;
		height: 83rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.jdt_righttimage {
		position: absolute;
		bottom: -5rpx;
		right: 0;
		width: 99rpx;
		height: 62rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.jdtlable {
		position: relative;

		.cicle {
			position: relative;
			right: 10rpx;
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background-color: #fff;
		}

		.lable {
			white-space: nowrap;
			position: absolute;
			right: 80%;
			transform: translate(50%, 0%);
			bottom: 40rpx;
			font-size: 28rpx;
			padding: 10rpx;
			font-family: HYZongYiJ;
			color: #FF5001;
			background-color: #fff;
			border-radius: 10rpx;

			.sanjiao {
				position: absolute;
				width: 30rpx;
				height: 10rpx;
				bottom: 0rpx;
				right: 50%;
				transform: translate(50%, 50%);
			}
		}
	}

	.fos30 {
		// width: 200rpx;
		// background-color: #FFAE2A;
		// padding: 10rpx;
		// border-radius: 10rpx;
		font-size: 30rpx;
		font-family: HYZongYiJ;
		font-weight: 800;
		color: #1ED76D;
	}

	.jdt_bottom {
		padding: 0 100rpx;
		margin-top: 20rpx;
		font-size: 30rpx;
		font-family: HYZongYiJ;
		font-weight: 800;
		color: #FFFFFF;
	}

	.u-line-progress {
		overflow: visible;
	}
</style>